<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="工业经济">
        <template #navBar>
          <bar-box :tableData="tableData"></bar-box>
        </template>
      </nav-bar>
    </div>
    <template v-if="actionName === 'atlas'">
      <atlas></atlas>
    </template>
    <template v-else-if="actionName === 'benchmarking'">
      <benchmarking></benchmarking>
    </template>
    <template v-else-if="actionName === 'overview'">
      <overview></overview>
    </template>
  </div>
</template>

<script setup>
import NavBar from "@/components/navBar.vue";
import {ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import atlas from "./components/atlas.vue";
import benchmarking from "./components/benchmarking.vue";
import overview from "./components/overview.vue";
import BarBox from "@/components/barBox.vue";
import {navData} from './data/data.js'

const tableData = ref(navData)
const route = useRoute()
const actionName = ref('taskIndicators')

watch(() => route.query.type, function (newVal) {
  actionName.value = newVal

}, {immediate: true})


</script>

<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}

</style>
